<template>
  <div id="goods">
    <div class="bgc">
      <van-row class="centenr">
        <van-sticky>
          <van-col span="24">
            <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
          </van-col>
        </van-sticky>
        <van-col span="24">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in bannerImg" :key="index">
              <img :src="image" alt="" class="box1" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
        <van-col span="24" class="box2 w">
          <p>{{ GetTextGoods.name }}</p>
        </van-col>
        <van-col span="24" class="box3 w">
          <van-col span="24">
            <p>{{ GetTextGoods.brief }}</p>
            <van-col span="24" class="box3-jiage">
              <del>原价：￥{{ GetTextGoods.counterPrice }}</del> <span>现价：￥{{ GetTextGoods.retailPrice }}</span>
            </van-col>
            <van-col class="box4">
              <!-- 厂牌 -->
              <span>{{ GetGoodsBrand.name }}</span>
            </van-col>
          </van-col>
        </van-col>
        <van-col span="24" class="box5">
          <van-cell title="规格数量选择" is-link @click="onShowStatus" />
        </van-col>
        <van-col span="24" class="box6">
          <van-cell :title="'评价（' + GetGoodsComment.count + '）'" is-link is-link value="查看全部" @click="onGoGoods" />
        </van-col>
        <van-col span="24">
          <Comments v-for="(item, index) in CommentsList" :key="item.id" :avatarUrl="item.avatar" :nickName="item.nickname" :addTime="item.addTime" :content="item.content" :picList="item.picList"></Comments>
        </van-col>
        <van-col span="24" class="box8 w">
          <p>产品参数</p>
          <van-col span="24" v-for="(item, index) in GetGoodsList.attribute" :key="item.id">
            <p class="van-ellipsis">
              <span>{{ item.attribute }}:</span> {{ item.value }}
            </p>
          </van-col>
          <!-- 常见问题 -->
          <van-col span="24" class="problem">
            <van-col span="24">
              <van-divider :style="{ color: '#5e5e5e', borderColor: '#cccccc', padding: '0 16px' }">
                常见问题
              </van-divider>
            </van-col>
            <van-col span="24" class="w">
              <ul v-for="li in GetGoodsList.issue" :key="li.id">
                <li>
                  <p>{{ li.question }}</p>
                  <p>{{ li.answer }}</p>
                </li>
              </ul>
            </van-col>
          </van-col>
          <!-- 大家都在看 -->
          <van-col span="24" class="problem">
            <van-col span="24">
              <van-divider :style="{ color: '#5e5e5e', borderColor: '#cccccc', padding: '0 16px' }">
                大家都在看
              </van-divider>
            </van-col>
            <van-col span="24" class="complete-centenr-comprehensive">
              <van-col span="12" v-for="(item, index) in GetGoodsList.relatedGoods" :key="index" @click="onGoGoodsList(item)">
                <div>
                  <img :src="item.picUrl" alt="" />
                  <p>{{ item.name }}</p>
                  <p>￥{{ item.retailPrice }}</p>
                </div>
              </van-col>
            </van-col>
          </van-col>
        </van-col>
      </van-row>
      <!-- 添加购物车 -->
      <van-col span="24">
        <van-goods-action>
          <van-goods-action-icon icon="cart-o" text="购物车" color="#ee0a24" @click="$router.push('/ShoppingCart')" />
          <van-goods-action-icon :icon="starStatus == true ? 'star' : 'star-o'" :text="starStatus == true ? '收藏' : '未收藏'" color="#ee0a24" @click="onStarStatus" />
          <van-goods-action-button type="warning" text="加入购物车" @click="onShowStatus" />
          <van-goods-action-button type="danger" text="立即购买" @click="onShowStatus" />
        </van-goods-action>
      </van-col>
      <van-popup v-model="PurchaseStatus" position="bottom">
        <van-col span="24" class="GoodsDetail">
          <GoodsDetail :Specifications="SpecificationsList" :data="GetGoodsList.productList" @materials="onMaterials" />
        </van-col>
      </van-popup>
    </div>
  </div>
</template>
<script>
import Comments from '@/components/user/comments/comments.vue'
import GoodsDetail from '@/components/goods/goodsDetail.vue'
import { Dialog } from 'vant'
export default {
  name,
  data() {
    return {
      // 规格窗口状态.
      PurchaseStatus: false,
      starStatus: false,
      bannerImg: {}, //轮播图
      GetTextGoods: {}, //标题文字区域
      GetGoodsList: {}, //标题文字区域
      GetGoodsBrand: {}, //厂牌
      CommentsList: {}, // 评论区
      GetGoodsComment: {}, //  评价总数
      // 传给子级组件的数据
      SpecificationsList: {},
      // 传给评论页面的数据
      setAppraise: {},
      GoodsId: ''
    }
  },
  components: {
    Comments,
    GoodsDetail
  },
  mounted() {
    this.onGetGoodsList()
  },
  methods: {
    // 弹出框状态
    onShowStatus() {
      this.PurchaseStatus = true
    },
    // 返回上一级
    onClickLeft() {
      this.$router.back()
    },
    // 获取数据
    onGetGoodsList() {
      this.$get('goods/detail', { id: this.$route.query.id }).then(result => {
        console.log(result.data.data)
        this.setAppraise = result
        this.GetGoodsList = result.data.data
        this.GetTextGoods = result.data.data.info
        this.GetGoodsBrand = result.data.data.brand
        this.bannerImg = result.data.data.info.gallery
        this.GetGoodsComment = result.data.data.comment
        this.CommentsList = result.data.data.comment.data
        this.SpecificationsList = result.data.data.specificationList
      })
    },
    // 点击跳转,并且把对应的值传到下一个组件
    onGoGoods() {
      this.$router.push({ path: '/appraise', query: this.setAppraise.data.data.info })
    },
    // 收藏
    onStarStatus() {
      // 设置收藏状态
      // 并且设置不同的请求
      // 反复切换
      var token = this.$jsCookie.get('token')
      if (token) {
        if (this.starStatus == false) {
          this.starStatus = true
          let data = {
            type: 0,
            valueId: this.$route.query.id
          }
          this.$post('collect/addordelete', data).then(result => {
            console.log(result)
          })
        } else {
          this.starStatus = false
          let data = {
            type: 1,
            valueId: this.$route.query.id
          }
          this.$post('collect/addordelete', data).then(result => {
            console.log(result)
          })
        }
      } else {
        Dialog.confirm({
          title: '收藏',
          message: '登录才能收藏哦'
        })
          .then(() => {
            // on confirm
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    // 接收子组件的事件内容
    onMaterials(show) {
      // childValue就是子组件传过来的值
      this.PurchaseStatus = show
    },
    // 点击跳转到对应的页面
    onGoGoodsList(item) {
      let params = {
        iid: item.id
      }
      this.$router.push({ path: '/goodslist', query: params })
    }
  }
}
</script>
<style lang="less" scoped>
.centenr {
  .box1 {
    width: 100%;
    height: 3.75rem;
    background-color: #fff;
  }
  .box1 {
    .van-swipe {
    }
    width: 100%;
    background-color: #fff;
  }
  .box2 {
    font-size: 19px;
    line-height: 0.5rem;
    font-weight: 600;
  }
  .box3 {
    background-color: #fff;
    p {
      opacity: 0.5;
      margin: 10px 0px;
    }
    .box3-jiage {
      del {
        opacity: 0.5;
        margin-right: 30px;
      }
      span {
        color: darkgoldenrod;
      }
    }
  }
  .box4 {
    span {
      display: block;
      font-size: 12px;
      margin: 20px 0px;
      padding: 3px 5px;
      border: 1px solid #f8bb7e;
      color: #f8bb7e;
    }
  }
  .box5 {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .box6 {
    margin-top: 0.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .box8 {
    margin-top: 0.2rem;
    margin-bottom: 0.7rem;
    .van-col {
      .van-ellipsis {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 5px;
        margin-top: 0px;
        span {
          width: 50px;
          color: rgba(0, 0, 0, 0.5);
          font-size: 12px;
        }
      }
    }
    .problem {
      .van-col {
        ul {
          li {
            p:nth-child(1) {
              opacity: 0.8;
              padding: 10px 0px;
            }
            p:nth-child(2) {
              opacity: 0.4;
              font-size: 14px;
            }
          }
        }
      }
      .complete-centenr-comprehensive {
        background-color: #f4f4f4;
        .van-col {
          padding: 2px;
          div {
            width: 100%;
            height: 2.5rem;
            background-color: #fff;
            text-align: center;
            img {
              width: 90%;
            }
            p:nth-child(2) {
              margin: 0px;
              font-size: 15px;
            }
            p:nth-child(3) {
              margin: 0px;
              color: chocolate;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
.GoodsDetail {
  width: 100%;
  height: 4rem;
}
</style>
